<template>
	<app-page>
		<wd-config-provider :theme="theme">
			<view class="container">
				<wd-navbar :custom-style="navbarCustom" fixed safeAreaInsetTop>
					<template #title>
						<cityPicker @change="cityPickerChange">
							<text class="addr-text">{{ appCity }}</text>
							<wd-icon name="caret-down-small" color="#FFF" size="42rpx"></wd-icon>
						</cityPicker>
					</template>
					<template #right>
					</template>
				</wd-navbar>
				<wd-swiper height="476rpx" :list="swiperList" autoplay :current="0"></wd-swiper>
				<view class="card">
					<view class="im-list">
						<view class="item" @click="doIm(1)">
							<view class="icon">
								<image src="https://lvshi.haidanet.com/uni-static/user/img/index/image-text.png">
								</image>
							</view>
							<view class="label">免费咨询</view>
							<view class="text">智能匹配律师</view>
						</view>
						<view class="item" @click="doIm(2)">
							<view class="icon">
								<image src="https://lvshi.haidanet.com/uni-static/user/img/index/phone.png">
								</image>
							</view>
							<view class="label">电话咨询</view>
							<view class="text">最快1分钟接通</view>
						</view>
						<view class="item" @click="doIm(3)">
							<view class="icon">
								<image src="https://lvshi.haidanet.com/uni-static/user/img/index/speciality.png">
								</image>
							</view>
							<view class="label">专家咨询</view>
							<view class="text">职业十年以上律师</view>
						</view>
					</view>
					<!-- 
					<view class="search">
						<wd-search @cancel="search" @search="search" v-model="lawyerName" placeholder-left
							custom-class="wd-search-custom-class-user" cancel-txt="找律师">
							<template #prefix>
								<wd-icon name="search" size="32rpx" color="#c91c1f"></wd-icon>
							</template>
						</wd-search>
					</view> -->
					<view class="title">
						在线委托，选择委托类型
					</view>
					<view class="classify-list">
						<view class="classify-list-item" @click="classListClick(item)"
							v-for="(item,index) in classifyList" :key="index">
							<view class="icon">
								<image :src="item.img"></image>
							</view>
							<view class="text">{{ item.name }}</view>
						</view>
					</view>


					<!-- <view class="tools-list1">
						<view class="tools-list-item" @click="goPage()">
							<view class="icon">
								<image src="https://lvshi.haidanet.com/uni-static/user/img/index/mediate.png"></image>
							</view>
							<view class="text">调解中心</view>
						</view>
						<view class="tools-list-item" @click="goPage()">
							<view class="icon">
								<image src="https://lvshi.haidanet.com/uni-static/user/img/index/knowledge.png"></image>
							</view>
							<view class="text">知识广场</view>
						</view>
					</view> -->

					<view class="tools-list">
						<template v-for="(item,index) in toolsList">
							<view v-if="index !== 2" class="tools-list-item" @click="goPage(item.url)">
								<view class="icon">
									<image :src="item.img"></image>
								</view>
								<view class="text">{{ item.name }}</view>
							</view>
							<view class="box" v-else>
								<wd-button type="success" @click="goPage('/collaborative/release/release')"
									custom-class="wd-button-custom-class-my-success  square wd-button-custom-class-w100">
									<text class="iconfont icon-fabu"></text>
									协同
								</wd-button>
								<wd-button type="success" @click="goPage('/query/release/release')"
									custom-class="wd-button-custom-class-my-cancel-1 square wd-button-custom-class-w100">
									<text class="iconfont icon-sousuo"></text>
									查询
								</wd-button>
							</view>
						</template>
					</view>
					<view class="excellent-lawyer">当地优质律师</view>
					<view class="list" v-if="!loading && dataList.length>0">
						<view class="item" v-for="(item,index) in dataList" @click="goPage2">
							<view class="msg" @click="goPage1">
								<text class="iconfont icon-wodezixun"></text>
								立即咨询
							</view>
							<view class="header">
								<view class="avatar">
									<image v-if="item.head" :src="item.head"></image>
									<image v-else src="@/static/logo.png"></image>
								</view>
								<view class="user">
									<view class="name">
										<text>{{ item.realname }}</text>
										<wd-rate size="20rpx" active-color="#C91C1F" num="5" v-model="item.star_nums"
											readonly />
									</view>
									<view class="number">
										服务总数<text>{{ item.service_nums }}</text>单
									</view>
								</view>
							</view>
							<view class="bottom">
								<view class="status" v-if="item.is_online===1">
									<wd-badge is-dot bg-color="#11BB65">
									</wd-badge>
									在线
								</view>
								<view class="status" v-if="item.is_online===0">
									<wd-badge is-dot bg-color="#C91C1F">
									</wd-badge>
									离线
								</view>
								<view class="tag" v-if="item.tags">
									<view class="item" v-for="(tag,tIndex) in item.tags">{{
										tag
									}}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</wd-config-provider>
		<classListBox ref="classListBoxRef"></classListBox>
	</app-page>
</template>

<script lang="ts">
	import { defineComponent, ref, computed } from 'vue';
	import { useToast } from '@/uni_modules/wot-design-uni';
	import { onPageScroll, onShow } from '@dcloudio/uni-app';

	import useStatusHeight from '@/hooks/useStatusHeight.ts';
	import useRouter from '@/hooks/useRouter';





	import useDataLoad from '@/hooks/useDataLoad.ts';
	import { getCateList, bannerList, getCategoryTwoList, getLawyerList } from "@/api/index.ts"
	import { useAppStore, useUserStore, useImStore } from '@/store';

	export default defineComponent({
		name: 'Index',
		components: {

		},
		onPageScroll(e) {
			// if (e.scrollTop > 0) {
			// 	navbarCustom.value = `width: 100%;background-color: rgb(201, 28, 31) !important;`;
			// } else if (e.scrollTop === 0) {
			// 	navbarCustom.value = `width: 100%;background-color: transparent;`;
			// }
		},
		setup(props, ctx) {
			// 信息提示
			const toast = useToast();
			// 日间light、夜间dark主题
			const theme = ref('light');
			const router = useRouter();
			const appStore = useAppStore();
			const userStore = useUserStore();
			const imStore = useImStore();
			const statusHeigt = useStatusHeight();
			const dataLoad = useDataLoad(getLawyerList);
			let navbarCustom = ref(`width:  ${statusHeigt.barLeft ? statusHeigt.barLeft + 'px' : 100 + '%'};padding-right:calc(100vh - ${statusHeigt.barLeft}px);background-color: transparent; `);
			const lawyerName = ref("");
			const classListBoxRef = ref(null);
			const swiperList : any = ref([
			]);
			const appCity = computed(() => {
				return appStore.city
			})
			const cityCode = computed(() => {
				return appStore.cityCode
			})
			const cityPickerChange = (e : any) => {
				appStore.setCity({
					city: e.label,
					cityCode: e.code// 获取城市代码，根据实际情况修改索引值。
				});
				dataLoad.setParams({
					city: cityCode.value
				});
				dataLoad.reGetData();
			}
			const imgsName : any = {

				"service0": 'https://lvshi.haidanet.com/uni-static/user/img/index/1.png',
				"service1": 'https://lvshi.haidanet.com/uni-static/user/img/index/2.png',
				"service2": 'https://lvshi.haidanet.com/uni-static/user/img/index/3.png',
				"service3": 'https://lvshi.haidanet.com/uni-static/user/img/index/4.png',
				"service4": 'https://lvshi.haidanet.com/uni-static/user/img/index/5.png',
				"service5": 'https://lvshi.haidanet.com/uni-static/user/img/index/6.png',
			}
			const classifyList = ref([]);


			const toolsList = [
				{
					name: "法律法规查询",
					// img: statute,
					img: "https://lvshi.haidanet.com/uni-static/user/img/index/statute.png",
					url: "/tools/lawsRegulations/index/index"
				},
				{
					name: "工具",
					img: "https://lvshi.haidanet.com/uni-static/user/img/index/compensate.png",
					url: "/tools/index/index"
					// img: compensate,
				},
				{
					name: "诉讼费计算",
					img: "https://lvshi.haidanet.com/uni-static/user/img/index/public-prosecution.png",
					url: "/tools/litigation/litigation"
					// img: prosecution,
				},

			];
			const serviceList = computed(() => {
				return appStore.consultList.map((item : any, index : any) => {
					return {
						...item,
						name: item.title,
						desc: item.desc,
						img: imgsName[`service${index}`]
					}
				})

			})
			const city = ref("徐州")
			// 地区选择
			const columnCount = ref(2);
			const defaultValue = ref('');
			const visible = ref(false);
			const search = () => {
				router.switchTab("/pages/lawyer/lawyer");
				uni.setStorageSync('lawyerName', lawyerName.value); // 存储搜索的律师名字，以便在律师列表页面使用
			}
			const goPage = (url : any, params ?: any) => {
				if (!url) {
					uni.$wdToast.error("暂未开放")
					return;
				}
				router.push({
					url,
					params
				})
			}
			const classListClick = (item : any) => {
				if (item.isAll) {
					classListBoxRef.value.handleOpen();
				} else {
					goPage('/case/release/release', { categoryId: item.id })
				}

			}
			const doChoice = () => {
				visible.value = true;
			}


			const cancel = () => {
				visible.value = false; // 关闭弹框
			};
			const goServiceInfo = (id : any) => {
				router.push({
					url: '/im/consult/consult',// 跳转到服务详情页面，需要根据实际情况修改URL路径和参数传递方式。
					params: {
						consult: id,
					},
				});
			}

			const doIm = (imTypeId : any) => {
				imStore.doIm(imTypeId);
			}
			const goPage2 = (item : any) => {
				router.push({
					url: "/im/lawyer/lawyer",
					params: {
						lawyer: item.id
					}, // 传递参数，例如搜索条件等。
				})
			};
			const goPage1 = (item : any) => {
				// 1 免费
				// 2 通话
				// 3 图文 = 专家
				imStore.doIm(3, item.id)
			};
			onShow(() => {
				appStore.getConsultList(); // 初始化应用配置
				appStore.getAppConfig(); // 初始化应用配置
				userStore.getUserInfo(); // 初始化用户信息
				dataLoad.setParams({
					city: cityCode.value
				});
				dataLoad.getData();
				bannerList().then((res : any) => {
					swiperList.value = res.map((item : any) => {
						return item.image
					});
				});

				// 获取案件分类
				getCateList().then((res : any) => {
					classifyList.value = res.map((item : any, index : number) => {
						return {
							...item,
							name: item.title,
							// img: imgsName[item.title]
						}
					})
					classifyList.value.push({
						name: "全部类型",
						img: 'https://lvshi.haidanet.com/uni-static/user/img/index/classify-all.png',
						isAll: true
					})
				})
				if (!appStore.city) {
					appStore.setCity({ city: "武汉市" }); // 存储城市信息到pinia中，以便在律师列表页面使用。	
				}
			})
			onPageScroll((e) => {
				if (e.scrollTop > 0) {
					navbarCustom.value = `width:  ${statusHeigt.barLeft ? statusHeigt.barLeft + 'px' : 100 + '%'};padding-right:calc(100vh - ${statusHeigt.barLeft}px);background-color: rgb(201, 28, 31) !important;`;
				} else if (e.scrollTop === 0) {
					navbarCustom.value = `width:  ${statusHeigt.barLeft ? statusHeigt.barLeft + 'px' : 100 + '%'};padding-right:calc(100vh - ${statusHeigt.barLeft}px);background-color: transparent; `;
				}
			});

			return {
				theme,
				statusHeigt,
				navbarCustom,
				swiperList,
				classifyList,
				toolsList,
				serviceList,
				doChoice,
				columnCount,
				defaultValue,
				visible,
				cancel,
				goServiceInfo,
				goPage,
				lawyerName,
				search,
				appCity,
				cityPickerChange,
				doIm,
				goPage2,
				goPage1,
				classListClick,
				classListBoxRef,
				...dataLoad,
			};
		},
	});
</script>

<style lang="less" scoped>
	.container {
		background-color: #f6f6f6;
		position: relative;

		/deep/.city {
			background-color: transparent !important;
			display: flex;
			align-items: center;
			padding: 0 24rpx;
		}

		.addr-text {
			font-size: 28rpx;
			font-weight: 700;
			color: #FFF;
			margin: 0 10rpx;
		}

		.addr {}

		.news {
			width: 40rpx;
			height: 40rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.wd-navbar {
			// top: var(--status-bar-height);
		}

		:deep(.wd-navbar) {
			position: fixed;
			width: 100%;
			height: 100rpx;
			// #ifdef MP
			height: 96rpx !important;
			line-height: 96rpx !important;
			// #endif
			background-color: transparent !important;

			// #ifdef MP
			.wd-navbar__right {
				top: -10rpx;
			}

			// #endif
			.wd-navbar__right:hover {
				background-color: transparent !important;
			}

			.wd-navbar__title {
				margin: 0;
				display: flex;
				align-items: center;
				max-width: 70%;
				// #ifdef MP
				max-width: 90%;
				// #endif
			}

			&::after {
				display: none !important;
			}
		}

		:deep(.wd-swiper) {
			.wd-swiper__track {
				border-radius: 0;
			}

			.wd-swiper-nav {
				bottom: 44rpx;
			}
		}

		.card {
			border-radius: 24rpx;
			background: #f6f6f6 !important;
			min-height: 100rpx;
			position: relative;
			top: -24rpx;
			padding: 24rpx;
			width: calc(100% - 24rpx - 24rpx);
			box-shadow: none;

			.title {
				font-size: 32rpx;
				font-weight: 700;
				color: #000;
				padding-top: 27rpx;
			}

			.classify-list {
				display: flex;
				align-items: center;
				justify-content: space-between;
				flex-wrap: wrap;

				&-item {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					padding: 12rpx 0 0 0;
					flex: 0 0 calc(100% / 4);

					.icon {
						width: 100rpx !important;
						/* 设置宽度 */
						height: 100rpx !important;

						/* 设置高度 */
						image {
							width: 100%;
							height: 100%;
						}
					}

					.text {
						font-size: 24rpx;
						font-weight: 500;
						color: rgba(51, 51, 51, 1);
					}
				}
			}

			.search {
				margin-top: 24rpx;

				:deep(.wd-search-custom-class-user) {
					background: rgba(255, 255, 255, 1);
					border: 2rpx solid #c91c1f;
					border-radius: 12rpx;

					padding: 12rpx 0 12rpx 24rpx;

					.wd-search__cancel {
						width: 100rpx;
						height: 68rpx;
						line-height: 68rpx;
						border-radius: 12rpx;
						background: #c91c1f;

						font-size: 28rpx;
						font-weight: 700;
						color: #FFF;
						text-align: center;
						padding: 0 24rpx !important; // 调整内边距
						margin-right: 24rpx;

					}

					.wd-search__block {
						background-color: #FFF !important;

						.wd-search__search-left-icon.wd-icon-search {
							display: none;
						}

						.wd-search__input {
							padding-left: 24rpx;
							margin-left: 24rpx;

							&::before {
								content: '';
								position: absolute;
								left: 24rpx;
								top: calc(100% / 2 - 30rpx / 2);
								bottom: 0;
								width: 2rpx; // 设置为0即可隐藏边框线
								background-color: #666666;
								height: 30rpx;
							}
						}

						.wd-search__cover {
							background-color: #FFF !important;
						}
					}
				}
			}

			.tools-list,
			.tools-list1 {
				display: flex;
				justify-content: space-between;
				margin-top: 24rpx;

				&-item {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					padding: 12rpx 0 0 0;
					position: relative;

					.icon {
						width: 218rpx !important;
						/* 设置宽度 */
						height: 218rpx !important;

						/* 设置高度 */
						image {
							width: 100%;
							height: 100%;
						}
					}

					.text {
						position: absolute;
						left: 14rpx;
						top: 40rpx;
						font-size: 26rpx;
						font-weight: 600;
						color: rgba(51, 51, 51, 1);

					}
				}

				.box {
					width: 240rpx;
					justify-content: space-between;
					display: flex;
					flex-direction: column;

					:deep(.wd-button) {
						min-width: auto !important;
						height: 100rpx !important;
					}
				}
			}

			.tools-list1 {
				.icon {
					width: 340rpx !important;
					height: 200rpx !important;
				}

				.text {
					left: auto;
					right: 14rpx;
				}
			}

			.im-list {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 24rpx;

				.item {
					display: flex;
					align-items: center;
					justify-content: center;
					flex-direction: column;
					min-width: 30%;

					.icon {
						width: 120rpx;
						height: 120rpx;
						background-color: #FFF;
						border-radius: 25rpx;
						display: flex;
						align-items: center;
						justify-content: center;

						image {
							width: 80rpx;
							height: 80rpx;
						}
					}

					.label {
						text-align: center;
						font-size: 28rpx;
						font-weight: 700;
						color: #000;
						margin-top: 12rpx;
					}

					.text {
						text-align: center;
						font-size: 24rpx;
						color: #000;
						margin-top: 12rpx;
						color: #7c7c7c;
					}

				}
			}

			.service-list {
				display: flex;
				align-items: center;
				justify-content: space-between;
				flex-wrap: wrap;



				&-item {
					margin-top: 24rpx;
					width: calc(340rpx - 24rpx - 24rpx) !important;
					height: 200rpx !important;
					position: relative;
					display: flex;
					align-items: center;
					padding: 0 12rpx;
					overflow: hidden;


					.text {
						.name {
							font-size: 32rpx;
							font-weight: 700;
							color: #000;

						}

						.desc {
							font-size: 20rpx;
							font-weight: 700;
							color: #c91c1f;
							margin-top: 24rpx;

						}
					}

					.bg {
						position: absolute;
						left: 0;
						top: -20%;
						width: 120%;
						height: 140%;

						image {
							width: 100%;
							height: 100%;
						}
					}
				}
			}

			.excellent-lawyer {
				font-size: 32rpx;
				font-weight: 700;
				color: #000;
				padding-top: 27rpx;
			}

			.list {
				padding-top: 27rpx;

				>.item {
					min-height: 200rpx;
					background: #FFFFFF;
					border-radius: 14rpx;
					border: 2rpx solid #EEEEEE;
					border-radius: 15rpx;
					margin-bottom: 27rpx;
					position: relative;

					.msg {
						width: 138rpx;
						height: 40rpx;
						background: linear-gradient(-33deg, #C91C1F 0%, #CA1C1F 100%);
						border-radius: 25rpx 0 0 25rpx;
						padding: 5rpx 10rpx;
						position: absolute;
						right: 0;
						top: 20rpx;


						font-family: PingFang;
						font-weight: bold;
						font-size: 22rpx;
						color: #FFFFFF;
						display: flex;
						align-items: center; // 垂直居中显示文字和图标。
						justify-content: center; // 水平居中显示文字和图标。

						.iconfont {
							margin-right: 12rpx;
						}
					}

					.header {
						display: flex;
						justify-content: space-between; // 水平方向上元素平均分布，两端对齐
						align-items: flex-start; // 垂直方向上元素居中对齐，垂直居中
						padding: 24rpx 24rpx 0 24rpx; // 调整内边距，使元素在容器内居中显示。

						.avatar {
							width: 100rpx; // 设置头像宽度，使元素在容器内居中显示。
							height: 100rpx; // 设置头像高度，使元素在容器内居中显示。
							border-radius: 50rpx;
							overflow: hidden;

							image {
								width: 100%;
								height: 100%;
							}
						}

						.user {
							width: calc(100% - 100rpx);
							padding-left: 24rpx;

							.name {
								display: flex;
								align-items: center;

								text {
									font-family: PingFang;
									font-weight: 400;
									font-size: 33rpx;
									color: #000000;
								}


								.wd-rate {
									margin-left: 24rpx;

									:deep(.wd-rate__item-star) {
										height: 100% !important;
									}
								}
							}

							.number {
								font-family: PingFang;
								font-weight: 400;
								font-size: 24rpx;
								color: #999999;
								margin-top: 18rpx;

								text {
									color: #c91c1f;
								}
							}

							&::after {
								content: " ";
								display: inline-block;
								width: 100%; // 设置为0即可隐藏边框线
								height: 1rpx; // 设置为0即可隐藏边框线
								background-color: #EEEEEE; // 设置为透明即可隐藏边框线
							}
						}

					}

					.bottom {
						display: flex;
						align-items: center;
						justify-content: space-between;
						padding-bottom: 24rpx;

						.status {
							width: 100rpx;
							text-align: center;
							font-family: PingFang;
							font-weight: 400;
							font-size: 22rpx;
							color: #999999;
							margin-top: 24rpx;

							.wd-badge {
								margin-right: 5rpx;
							}
						}

						.tag {
							width: calc(100% - 100rpx - 24rpx);
							display: flex;
							align-items: center;
							justify-content: flex-start;
							flex-wrap: wrap;

							.item {
								padding: 10rpx 20rpx;
								background: #F2F2F2;
								border-radius: 15rpx;
								font-family: PingFang;
								font-weight: 400;
								font-size: 22rpx;
								color: #333333;
								margin-left: 24rpx;
								margin-top: 24rpx;
							}
						}
					}
				}
			}
		}
	}
</style>